<template>
  

   <div class="content">
        
            <div @click="gotoSearch()" style="width:90%;height:40px;background-color: #dcdcdc;margin-left: 5%;margin-top:-2%;">
              <img style="width:30%;margin-top:1%;" src="../assets/top/01.png">   
             </div>

              <div class="fenge1" style="margin-top:2%;"></div>

              <div><img style="width:100%;margin-top:1%;" src="../assets/top/10.png"></div>

              <div class="cri" @click="togoZhuan()"></div>
              <div class="cri"  @click="togoHua()" style="margin-top:-9.5%;margin-left:33%;background-color: #996633;border: 2px #996633 solid;"></div>
              <div class="cri" style="margin-top:-9.5%;margin-left:56%;background-color: #cccc33;border: 2px #cccc33 solid;"></div>
              <div class="cri" style="margin-top:-9.5%;margin-left:80%;background-color: #cccc66;border: 2px #cccc66 solid;"></div>
              
              <span class="cc1" style="margin-left:-1%;" @click="togoZhuan()">专栏</span>
              <span class="cc1" @click="togoHua()">话题</span>
              <span class="cc1" @click="togoShou()">收藏</span>
              <span class="cc1">分享</span>
              <div class="fenge" style="opacity:0.5;"></div>

              <div class="rehua">热门话题</div>
              <div class="chahua" v-on:click="togohuaa()"><a>查看热门话题 ></a></div>

               <div class="fenge1" style="margin-top:2%;opacity: 0.5;"></div>
                
               <span class="kk"><img v-on:click="togodei" src="../assets/top/11.png"></span>
               <span class="kk"><img v-on:click="togodei2" src="../assets/top/12.png"></span>
               <span class="kk"><img v-on:click="togodei3" src="../assets/top/13.png"></span>
               <div class="fenge" style="opacity:0.5;"></div>

               <div class="rehua">热门内容</div>
               <div class="fenge1" style="margin-top:2%;opacity: 0.5;"></div>

               <div style="width:100%; height:40px;background-color: white;">
               <div class="cricle"></div>
               </div>
               <div class="hua">用户名</div>
               <div class="wenti">我是问题我是问题</div>
               <div class="huida">我是回答我是回答我是回答我是回答我是回答我是回答我是回答我是回答我是回答我是回答我是回答我是回答我是回答我是回答我是回答我是回答我是回答我是回答我是回答我是回答我是回答</div>
               <div class="xiabiao">15 赞同 | 6评论 | 关注问题</div>
               <div class="fenge" style="opacity:0.5;"></div>
              
            
              
       

   </div>
</template>

<script>
    export default{
        data(){
            return{
                
            }
        },
        methods:{
            togoZhuan:function(){
                this.$router.push({path:"zhuanlan"});
            },
            togoHua:function(){
                this.$router.push({path:"huati"});
            },
            togodei:function(){
                this.$router.push({path:"detail"});
            },
            togodei2:function(){
                this.$router.push({path:"daying"});
            },
            togodei3:function(){
                this.$router.push({path:"wangye"});
            },
            togohuaa:function(){
                this.$router.push({path:"huati"});
            },
             togoShou:function(){
                this.$router.push({path:"shoucang"});
            },
            gotoSearch:function(){
                this.$router.push({path:"search"})
            }
        }
    }
</script>

<style>
        .content{
        background-color:#ffffff;
        height: auto;
        padding-top:10%;
        padding-bottom:200%;
        margin-bottom:-18%;
        margin-top: -1%;
    }

    .cri{
        background-color: #336666;
        width:10%;
        height:40px;       
        margin-left: 10%;
        margin-top: 3%;
        border: 2px #336666 solid;
        border-radius:50%;
    }

    .cc1{
        margin-left:15%;
        color:#339933;
      
        font-size: 110%;
        
    }

    .rehua{
        margin-top:3%;
        margin-left:-65%;
        color:#339933;
     
        font-size: 110%;
    }
    .chahua{
        margin-top:-5%;
        margin-left: 70%;
        font-size:80%;
    }

    .kk img{
        width:30%;
        margin-top:2%;
        border:1px #339933 solid;
    }

    .wenti{
         color:#339933;
        font-family: "方正兰亭超细黑简体";
        font-size: 110%;
        float: left;
        margin-left: -5%;
        margin-top:3%;
    }
    .huida{
         color:#339933;
        font-family: "方正兰亭超细黑简体";
        font-size: 100%;
        float: left;
        margin-left: 5%;
        margin-top:1%;
        width: 95%;
    }

    .xiabiao{
         color:#339933;
        margin-top:25%;
        font-size: 80%;
        margin-left: -57%;
       
    }


</style>
  